<template>
  <div>
    <vo-table ref="voTable" :data="data.table">
      <template #leftBar>
        <tiny-form :inline="true" class="demo-form-inline" label-position="left" v-model="searchForm">
          <tiny-form-item label="来源">
            <vo-select select :options="sysRule" v-model:value="searchForm.ruleId" lab="ruleName" val="ruleId" />
          </tiny-form-item>
          <tiny-form-item>
            <tiny-form-item label="作者或书名">
              <tiny-input v-model="searchForm.bookName" placeholder="作者或书名"></tiny-input>
            </tiny-form-item>

            <tiny-button type="primary" @click="queryBook">查询</tiny-button>
          </tiny-form-item>
        </tiny-form>
      </template>
      <template v-slot:bookDetail="{row}">
        <tiny-button text size="small" type="primary" @click="showDetail(row)">
          {{ row.bookName }}
        </tiny-button>
      </template>
    </vo-table>
    <yu-dialog :data="dialogConfig" v-model:isShow="isShow">
      <sys-book-detail :bookInfo="bookInfo"></sys-book-detail>
    </yu-dialog>
  </div>
</template>

<script setup>
  import {reactive, ref, onMounted, getCurrentInstance} from 'vue';
  import SysBookDetail from './SysBookDetail.vue';
  let {proxy} = getCurrentInstance();
  const sysRule = ref({});
  const searchForm = reactive({ruleId: ''});
  const isShow = ref(false);
  const dialogConfig = reactive({});
  const bookInfo = ref({});
  const data = reactive({
    table: {data: [], cols: [], config: {tree: true}, tree: true},
  });
  data.table.cols = [
    {type: 'selection'},
    {title: '书名', key: 'bookName', align: 'left', slot: 'bookDetail'},
    {title: '作者', key: 'bookAuthor', align: 'center'},
    {title: '类型', key: 'bookKind', align: 'center'},
    {title: '状态', key: 'bookState', align: 'center'},
    {title: '加入日期', key: 'createDate', align: 'center'},
  ];

  onMounted(() => {
    //显示区域
    sysRuleDict();
  });
  const sysRuleDict = async () => {
    proxy.$api.rule.getSysRule().then(res => {
      sysRule.value = res;
    });
  };
  const queryBook = () => {
    proxy.$api.rule.queryBookMain(searchForm).then(res => {
      tableData.data = res;
    });
  };
  const showDetail = row => {
    isShow.value = true;
    dialogConfig.title = row.bookName;
    dialogConfig.width = '60%';
    bookInfo.value = row;
  };
</script>
<style lang="scss" scoped></style>
